import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import RoleAdd from "./popup/add/add";
import roleService from "@/modules/permission/role.service";
import { EditOutlined, DeleteOutlined, DoubleRightOutlined, CheckCircleOutlined, UserOutlined } from "@ant-design/icons-vue";
import useNavigator from "@/hooks/useNavigator";
import { message, Modal } from "ant-design-vue";
import _ from "lodash";
export default defineComponent({
  name: "rolePage",
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh", "add", "delete"],
        right: ["filter", "search"],
        add: {
          handler: () => {
            roleAddRef.value.open();
          },
        },
        delete: {
          handler: () => {
            LTableRef.value.$fetchTableData();
          },
        },
      },
      dataSource: [],
      columns: [
        {
          title: "角色编号",
          dataIndex: "role_id",
          key: "role_id",
          align: "center",
          width: "80px",
        },
        {
          title: "角色名称",
          dataIndex: "role_name",
          align: "center",
          width: "180px",
        },
        {
          title: "权限标识",
          dataIndex: "role_key",
          align: "center",
          width: "180px",
        },
        {
          title: "显示顺序",
          dataIndex: "role_sort",
          align: "center",
          width: "80px",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "150px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "220px",
        },
      ],
      loading: false,
      searchForm: {
        role_name: {
          type: "input",
          label: "角色名称",
          attrs: { placeholder: "角色名称" },
        },
        role_key: {
          type: "input",
          label: "权限字符",
          attrs: { placeholder: "权限字符" },
        },
        status: {
          type: "select",
          label: "状态",
          attrs: { placeholder: "状态" },
          datas: [{ label: '正常', value: '1' }, { label: '停用', value: '0' }]
        },
        create_time: {
          type: "date_range",
          label: "创建时间",
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
      cityArray: [],
      marriageArray: [],
      politicsFaceArray: [],
      nationArray: [],
      id: "",
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    const $service = new roleService();
    const LTableRef = ref(null as any);
    const roleAddRef = ref(null as any);
    // 状态变更
    const statusChange = _.debounce((e: any, record: any) => {
      record.statusEditing = true;
      const status = e ? '1' : '0';
      $service.changeStatus({
        role_id: record.role_id,
        status,
      }).then((res: any) => {
        message.success('编辑成功!');
        record.status = status;
      }).finally(() => {
        record.statusEditing = false;
      })
    }, 300, { leading: true, trailing: false })
    return () => (
      <Page>
        <CardWithTitle title="角色管理">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              onChange={tableChangeHandler}
              row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="role_id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          disabled={record.role_id === 1}
                          v-slots={{
                            icon: () => <EditOutlined />,
                          }}
                          onClick={() => {
                            roleAddRef.value.open(record.role_id);
                          }}
                        >
                          编辑
                        </a-button>
                        <a-button
                          class={record.role_id === 1 || "et-btn-danger"}
                          type="primary"
                          disabled={record.role_id === 1}
                          size="small"
                          v-slots={{
                            icon: () => <DeleteOutlined />,
                          }}
                          onClick={() => {
                            Modal.confirm({
                              title: '提示',
                              content: '确认删除?',
                              onOk: () => {
                                LTableRef.value.$deleteTableRows([record.role_id])
                              }
                            })
                          }}
                        >
                          删除
                        </a-button>
                        <a-dropdown placement="bottomRight" v-slots={{
                          overlay: () => (
                            <a-menu>
                              <a-menu-item>
                                <a-button type="text" size="small" v-slots={{
                                  icon: () => <CheckCircleOutlined />
                                }}>
                                  数据权限
                                </a-button>
                              </a-menu-item>
                              <a-menu-item>
                                <a-button type="text" size="small" v-slots={{
                                  icon: () => <UserOutlined />
                                }} onClick={() => { navigator.push({ name: 'roleUserPage', query: { role_id: record.role_id } }) }}>
                                  分配用户
                                </a-button>
                              </a-menu-item>
                         
                            </a-menu>
                          )
                        }}>
                          <a-button
                            type="text"
                            size="small"
                            disabled={record.role_id === 1}
                            v-slots={{
                              icon: () => <DoubleRightOutlined />
                            }}
                          >
                            更多
                          </a-button>
                        </a-dropdown>
                      </div>
                    );
                  }
                  // 状态
                  if (column.dataIndex === 'status') {
                    return (
                      <a-switch loading={record.statusEditing} checked={record.status === '1'} onChange={(e: any) => statusChange(e, record)}></a-switch>
                    )
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <RoleAdd service={$service} ref={roleAddRef} onChange={() => { LTableRef.value.$fetchTableData() }} />
      </Page>
    );
  },
});